// 方式1 渲染函数的使用
// export default function tsxInfo() {
//   return (<div>tsx使用</div>)
// }

// 方式2选项API
// import { defineComponent } from "vue";
// export default defineComponent({
//     data(){
//       return {
//         age:12
//       }
//     },
//     render(){
//       return (<div>{this.age}</div>)
//     }
// })


// 方式3 setup
import { defineComponent,ref,reactive } from "vue";
interface Props {
  name?:String
 }
export default defineComponent({

     props:{
      name:String
     },
    setup(props:Props,{emit}){
      const name='我是tsx';
      // const flag=ref(false);
      const flag=reactive(false);
      const arr=['1','2']
      const fn=()=>{
        console.log('触发了',props.name)
        emit('on-click','触发了')

      }
      // return ()=>(<div>{name}<div v-show={flag.value}>{name}</div></div>)
      return()=> (<div>
      {arr.map(item=><div onClick={()=>fn()}name={item}>{item}</div>)}
      </div>)
    }
})


// 总结：
// 变量都使用{}包裹
// tsx 不会自动解包 所以要使用.value
// map 替代v-for
// prop emit 使用
